<div class="doctor-row">
    <h1 class="choose-time-slot">Choose a time slot below and proceed to make your appointment</h1>
</div>
<div class="doctor-row">
    <?php include_partial("select_field", array("form" => $form, "field" => "appointment_reason_id")) ?>
</div>
<div class="doctor-row">
    <div id="doctor-week-slider-controls-inline">
        <div class="inline-block" id="doctor-prev-week-block-inline">
            <button class="button week-action" type="submit" id="prev-week-inline">Prev Week</button>
        </div>
        <div class="inline-block" id="doctor-this-week-block-inline">
            <button class="button week-action" type="submit" id="this-week-inline">This Week</button>
        </div>
        <div class="inline-block" id="doctor-next-week-block-inline">
            <button class="button week-action" type="submit" id="next-week-inline">Next Week</button>
        </div>
    </div>
    <?php include_partial("doctor/time_slots", array("doctor" => $doctor, "id" => "-inline", "showHeadings" => true)) ?>
</div>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){        
        $sliderContainerInline = $('#time-slot-inner-slider-inline').cycle({
            fx:     'scrollHorz',
            timeout: 0,
            next:   '#next-week-inline',
            prev: '#prev-week-inline'
        });
        
        $('#this-week-inline').click(function(){
            $sliderContainerInline.cycle(0);
        });
        
        // handle each slot click
        $(".doctor-action-open").click(function(){
            // check to see if the appointment reason field exists
            var $appointmentReasonId = $("#book_now_inline_appointment_reason_id").val();
            if($appointmentReasonId == undefined || $appointmentReasonId == ""){
                $appointmentReasonId = 0;
            }
            window.location = "/appointment-book-now-step-one/" + $(this).attr("id") + "/" + $appointmentReasonId;
        });
    });
    //]]>
</script>